<template>
  <div class="manage-box">
    <div class="header">
      <div class="left flex">
        <span>房间管理</span>
        <span class="btn" @click="noticeSet">公告</span>
        <span class="btn" @click="backImgSet">背景图</span>
      </div>
      <div class="right flex edit_div">
        <span>管理员</span>
        <img v-for="i in 6" :key="i" class="manager-item" :src="addIcon" />
        <span class="btn" @click="managerSet">编辑</span>
      </div>
    </div>
    <div class="middle">
      <SetMicrophoneRule ref="setMicrophoneRuleRef" />
      <div v-for="(item, index) in list" :key="index" class="middle-item">
        <div class="title">
          <span class="left">
            <span class="m-r-4" style="font-size: 16px">{{ item.title }}</span>
            <span v-if="item.leftBtn" class="btn" @click="item.leftClick">{{ item.leftBtn }}</span>
          </span>
          <span class="right">
            <span v-if="item.text" class="m-r-4">{{ item.text }}</span>
            <span
              v-if="item.rightBtn"
              style="cursor: default"
              class="record-btn"
              @click="item.rightClick"
            >
              {{ item.rightBtn }}
            </span>
          </span>
        </div>
        <div class="box">
          <!-- 背景音乐 -->
          <div v-if="item.title === '背景音乐'">
            <BgMusic :headers="bgHeaders" :rows="songList" />
          </div>

          <!-- 点歌列表 -->
          <div v-else-if="item.title === '点歌列表'">
            <BgMusic :headers="songHeaders" :rows="songList" />
          </div>

          <!-- 排麦列表 -->
          <div v-else-if="item.title === '排麦列表'">
            <BgMusic :headers="micHeaders" :rows="micList" />
          </div>
        </div>
      </div>
    </div>
    <!-- 底部功能按钮 -->
    <div class="footer">
      <div v-for="(item, index) in functionBtnList" :key="index" class="item" @click="item.event">
        <img class="icon" :src="item.icon" />
        <span class="text">{{ item.text }}</span>
      </div>
    </div>
    <PayLikes ref="payLikesRef" @toRecharge="rechargeDialogRef.show()" />
  </div>
  <BlackList v-model="showBlackDialog"></BlackList>
  <WhisperDialog v-model="showWhisperDialog"></WhisperDialog>
  <Locked v-model="showLockedDialog"></Locked>
  <SingRecord v-model="showSingRecordDialog"></SingRecord>
  <Notice v-model="isNoticeShow" />
  <SongPricing ref="songRef" :price="songPrice" @submit="handlePriceSubmit" />
  <RedPacket v-model="showRedPacketDialog" @toRecharge="rechargeDialogRef.show()" />
  <!-- <SingingRecord ref="recordsRef" :headers="recordsHeaders" :rows="recordsList" /> -->
  <RechargeDialog ref="rechargeDialogRef" />
  <SetMicrophoneNumber ref="setMicrophoneNumberRef" />
  <VoiceSetting ref="voiceSettingRef" />
  <AdminSettings v-model="showAdminSettingsDialog" />
  <VoiceEffectSetting ref="voiceEffectSettingRef" />
  <Gift ref="giftRef" />
  <RoomBackground v-model="showBackImgDialog" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import addIcon from "@/assets/live/addManage.svg";
import BgMusic from "./BgMusic.vue";
import BlackList from "./dialog/BlackList.vue";
import WhisperDialog from "./dialog/Whisper.vue";
import Locked from "./dialog/Locked.vue";
import SingRecord from "./dialog/SingRecord.vue";
import Notice from "./dialog/Notice.vue";
import SongPricing from "./dialog/SongPricing.vue";
import SetMicrophoneRule from "./SetMicrophoneRule.vue";
import SetMicrophoneNumber from "./SetMicrophoneNumber.vue";
import PayLikes from "./PayLikes.vue";
import RechargeDialog from "./RechargeDialog.vue";
import VoiceSetting from "./VoiceSetting.vue";
import AdminSettings from "./dialog/AdminSettings.vue";
import VoiceEffectSetting from "./VoiceEffectSetting.vue";
import RedPacket from "./dialog/RedPacket.vue";
import Gift from "./Gift.vue";
import RoomBackground from "./dialog/RoomBackground.vue";

const showBlackDialog = ref(false);
const showWhisperDialog = ref(false);
const showLockedDialog = ref(false);
const showSingRecordDialog = ref(false);
const showRedPacketDialog = ref(false);
const isNoticeShow = ref(false);
const showAdminSettingsDialog = ref(false);
const showBackImgDialog = ref(false);

const songRef = ref();
// const recordsRef = ref();
const setMicrophoneRuleRef = ref();
const setMicrophoneNumberRef = ref();
const payLikesRef = ref();
const rechargeDialogRef = ref();
const voiceSettingRef = ref();
const voiceEffectSettingRef = ref();
const giftRef = ref();
const songPrice = ref(200); // 歌曲定价
const microphoneStatus = ref("2"); // 上麦是否需要申请 1是 2否
const list = ref([
  {
    title: "背景音乐",
    leftBtn: "",
    leftClick: undefined,
    rightBtn: "",
    rightClick: undefined,
    text: "",
  },
  {
    title: "点歌列表",
    leftBtn: "修改定价",
    leftClick: () => {
      songRef.value.show();
      console.log("修改定价");
    },
    rightBtn: "记录",
    rightClick: () => {
      // recordsRef.value.show();
      console.log("记录");
      showSingRecordDialog.value = true;
    },
    text: `歌曲定价:${songPrice.value}`,
  },
  {
    title: "排麦列表",
    leftBtn: "修改规则",
    leftClick: () => {
      setMicrophoneRuleRef.value.show();
    },
    rightBtn: "",
    rightClick: undefined,
    text: Number(microphoneStatus.value) === 1 ? "上麦需要申请" : "上麦不需要申请",
  },
]);
const { microphoneCount } = inject("microphone");
// 功能按钮列表
const functionBtnList = ref([
  {
    icon: "src/assets/live/functionIcon/message.svg",
    text: "私信",
    event: () => {
      console.log("这是私信");
    },
  },
  {
    icon: "src/assets/live/functionIcon/voice.svg",
    text: "声音设置",
    event: () => {
      voiceSettingRef.value.show();
    },
  },
  {
    icon: "src/assets/live/functionIcon/soundEffect.svg",
    text: "音效设置",
    event: () => {
      voiceEffectSettingRef.value.show();
    },
  },
  {
    icon: "src/assets/live/functionIcon/microphone.svg",
    text: "开麦中",
    event: () => {
      console.log("这是开麦状态");
    },
  },
  {
    icon: "src/assets/live/functionIcon/blackList.svg",
    text: "黑名单",
    event: () => {
      showBlackDialog.value = true;
    },
  },
  {
    icon: "src/assets/live/functionIcon/ban.svg",
    text: "禁言名单",
    event: () => {
      showWhisperDialog.value = true;
    },
  },
  {
    icon: "src/assets/live/functionIcon/locked.svg",
    text: "房间锁定",
    event: () => {
      console.log("这是房间锁定");
      showLockedDialog.value = true;
    },
  },
  {
    icon: "src/assets/live/functionIcon/changeMicrophone.svg",
    text: "麦位变更",
    event: () => {
      setMicrophoneNumberRef.value.show(microphoneCount.value);
    },
  },
  {
    icon: "src/assets/live/functionIcon/popularity.svg",
    text: "购买人气",
    event: () => {
      payLikesRef.value.show();
    },
  },
  {
    icon: "src/assets/live/functionIcon/clear.svg",
    text: "清空屏幕",
    event: () => {
      console.log("这是清空屏幕");
    },
  },
  {
    icon: "src/assets/live/functionIcon/recharge.svg",
    text: "充值",
    event: () => {
      rechargeDialogRef.value.show();
    },
  },
  {
    icon: "src/assets/live/functionIcon/redPacket.svg",
    text: "红包",
    event: () => {
      showRedPacketDialog.value = true;
    },
  },
  {
    icon: "src/assets/live/functionIcon/gift.svg",
    text: "礼物",
    event: () => {
      giftRef.value.show();
    },
  },
]);

const backImgSet = () => {
  showBackImgDialog.value = true;
  console.log("设置背景图", showBackImgDialog.value);
};

const noticeSet = () => {
  isNoticeShow.value = true;
};

const managerSet = () => {
  showAdminSettingsDialog.value = true;
};

//底部背景音乐列表
const bgHeaders = [
  { title: "序号", key: "index" },
  { title: "歌曲名称", key: "title" },
  { title: "操作", key: "action", actionType: "播放" },
];
//底部点歌列表
const songHeaders = [
  { title: "序号", key: "index" },
  { title: "歌曲名称", key: "title" },
  { title: "用户", key: "user" },
  { title: "操作", key: "action", actionType: "开始" },
];
//底部排麦列表
const micHeaders = [
  { title: "序号", key: "index" },
  { title: "用户", key: "user" },
  { title: "麦位名称", key: "mic" },
  {
    title: "操作",
    key: "action",
    actionType: "expand",
  },
];

const songList = ref([
  {
    id: 1,
    index: 1,
    title: "真的爱上你",
    user: "小包子",
  },
  { id: 2, index: 2, title: "真的爱上你11111111111111111111111", user: "小包子" },
  { id: 3, index: 3, title: "真的你", user: "小包子" },
  { id: 4, index: 4, title: "你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
  { id: 5, index: 5, title: "真的爱上zzz你", user: "小包子" },
]);

const micList = ref([
  { id: 1, index: 1, user: "小包子", mic: "1号麦" },
  { id: 2, index: 2, user: "小包子", mic: "2号麦" },
  { id: 3, index: 3, user: "小包子", mic: "3号麦" },
  { id: 4, index: 4, user: "小包子", mic: "4号麦" },
  { id: 5, index: 5, user: "小包子", mic: "5号麦" },
  { id: 6, index: 5, user: "小包子", mic: "5号麦" },
  { id: 7, index: 5, user: "小包子", mic: "5号麦" },
]);

// 展开按钮状态
const showActionBtn = ref(false);

// 关闭弹窗
const closeActionMenu = () => {
  showActionBtn.value = false;
};

// 点击外部区域关闭
onMounted(() => {
  document.addEventListener("click", closeActionMenu);
});
onUnmounted(() => {
  document.removeEventListener("click", closeActionMenu);
});

//修改定价--提交
const handlePriceSubmit = () => {
  console.log("提交修改定价");
};
</script>

<style lang="scss" scoped>
.manage-box {
  width: 100%;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  .header {
    display: flex;
    justify-content: space-between;
    color: #fff;
    .flex {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .left {
      .btn {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 69px 69px 69px 69px;
        border: 1px solid rgba(255, 255, 255, 0.5);
        padding: 8px 15px;
        cursor: default;
        cursor: pointer;
      }
    }
    .right {
      .manager-item {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-color: lightcoral;
      }
      .btn {
        color: #e0405b;
        cursor: default;
        cursor: pointer;
      }
    }
    .edit_div {
      cursor: pointer;
    }
  }
  .middle {
    height: 220px;
    display: flex;
    color: #fff;
    gap: 18px;
    justify-content: space-between;
    .middle-item {
      width: 35%;
      min-width: 304px;
      display: flex;
      flex-direction: column;
      .title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        .small {
          font-family: 13px;
        }
        .btn {
          border-radius: 69px 69px 69px 69px;
          border: 2px solid rgba(255, 255, 255, 0.2);
          padding: 2px 5px;
          cursor: default;
        }
      }
      .box {
        margin-top: 4px;
        border-radius: 8px;
        background: rgba(0, 0, 0, 0.1);
        flex: 1;
      }
    }
  }
  .footer {
    margin-top: 10px;
    min-height: 62px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 30px;
    color: #fff;

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      .icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      .text {
        font-size: 8px;
      }
    }
  }
  .action-btn {
    background: #5c5c5c;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.15);
    border-radius: 5px 5px 5px 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    button {
      background-color: transparent;
      font-size: 14px;
      color: #ffffff;
      display: flex;
      white-space: wrap;
      padding: 12px 14px;
    }
  }
}
</style>
